<template>
	<view class="th-file-box">
		<view class="progress-line-box" :style="{'opacity':(0<file.progess)?'1':'0',
		'width':file.progess+'%'
		,'border-top-right-radius':file.progess==100?'8rpx':'0'
		,'border-bottom-right-radius':file.progess==100?'8rpx':'0'}"></view>
		<slot>
			<image class="file-image" :src="setImg(file.name)"></image>
		</slot>
		<view class="file-content-box">
			<view class="title-text text-line-c" :style="{'-webkit-line-clamp':1}">{{file.name}}</view>
			<view class="desc-text">
				<view v-if="toMB(file.size)">{{toMB(file.size)}} </view>
				<view class="mar-left25">{{uploadStatus()}}</view>

			</view>
			<view class="text-priview">
				<view class="text-priview-remove-text-color" @tap="remove">移除</view>
				<view v-if="!file.status" class="left36 text-priview-try-text-color" @tap="reUpload">点击重试</view>
			</view>

		</view>


	</view>
</template>

<script>
	export default {
		name: "th-file",
		data() {
			return {
				statusMap: new Map([
					[0, '等待上传'],
					[100, '上传成功'],
					[-1, '上传中']
				])

			};
		},
		props: {
			file: {
				type: Object,
				default: {}
			},
			index:{
				type:Number,
				default:-1
			}
		},
		methods: {
			toMB(size) {
				if (!size)
					return ''
				if (size < 1024)
					return size + 'B'
				else if ((size / 1024).toFixed(2) < 1024) {
					return (size / 1024).toFixed(2) + 'K'
				} else
					return (size / 1024 / 1024).toFixed(2) + 'M'

			},
			remove(){
				this.$emit('remove',this.index)
			},
			reUpload(){
				this.$emit('reupload',this.index)
			},

			uploadStatus() {
				let statusStr = ''
				const status = this.file.status
				const progress = this.file.progess
				if (status) {
					if(progress==0||progress==100)
					statusStr=this.statusMap.get(progress)
					else
					statusStr=this.statusMap.get(-1)

				} else {
					statusStr = '上传失败'
				}
				return statusStr
			},
			
			getType(file) {
				let imgType = ['bmp', 'jpg', 'jpeg', 'png', 'tif', 'gif', 'pcx', 'tga', 'exif', 'fpx', 'svg', 'psd', 'cdr',
					'pcd', 'dxf', 'ufo', 'eps', 'ai', 'raw', 'WMF', 'webp'
				]
				let fileTypev = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf']
				let videoType = ['avi', 'mov', 'rmvb', 'flv', 'mp4']
				let spertas = file.split('.')
				if (spertas.length > 0) {
					if (imgType.indexOf(spertas[spertas.length - 1]) != -1)
						return 'img'
					if (fileTypev.indexOf(spertas[spertas.length - 1]) != -1)
						return 'txt'
					if (videoType.indexOf(spertas[spertas.length - 1]) != -1)
						return 'vdo'
				}
				return 'unknow'
			},
			setImg(file) {
				let src = ''
				switch (this.getType(file)) {
					case 'img':
						src = ""
						break
					case 'txt':
						src = ''
						break
					case 'vdo':
						src = ''
						break
					default:
						src =''
						break
				}
				return src
			},
		}
	}
</script>

<style scoped lang="scss">
	.th-file-box {
		position: relative;
		width: 100%;
		min-height: 120rpx;
		background: #F6F7FB;
		border-radius: 8rpx;
		box-sizing: border-box;
		padding: 14rpx 24rpx;
		display: flex;
		align-items: center;
		border-radius: 8rpx;

		.file-image {
			width: 54rpx;
			height: 62rpx;
			white-space: nowrap;
			z-index: 999;
		}

		.title-text {
			font-size: 30rpx;
			color: #333333;
			line-height: 42rpx;
			word-break: break-all;
		}

		.desc-text {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: #999999;
			line-height: 34rpx;
		}
	}

	.file-content-box {
		flex: 1;
		margin-left: 18rpx;
		position: relative;

		.text-priview {
			display: flex;
			align-items: center;
			position: absolute;
			right: 0;
			bottom: 0;
			font-size: 24rpx;
			
			line-height: 34rpx;
			.left36 {
				margin-left: 36rpx;
			}
			&-remove-text-color{
				color: #E73535;
			}
			&-try-text-color{
				color: #0077FF;
			}
		}
	}

	.text-line-c {
		word-break: break-all;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.progress-line-box {
		height: 100%;
		background-color:#efefef;// #41ae3c;
		position: absolute;
		left: 0;
		border-radius: 8rpx;
		border-top-left-radius: 8rpx;
		border-bottom-left-radius: 8rpx;

	}

	.mar-left25 {
		margin-left: 25rpx;
	}
</style>